@charset "utf-8";

/*
 * @title           其它页面网站样式
 * @version         1.0
 * @update          $Date: 2020-12-14
 */

@import "./core/mixins";

/* --------------------------------------------------------------
  primary styles
-------------------------------------------------------------- */
html,
body {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}
.layout {
  display: flex;
  flex-direction: column;
  padding: 0 25px 0 25px;
}
.bg {
  background: #040c19 url(./../images/background.jpg) no-repeat 50% 0;
  background-size: cover;
}

.chart {
  width: 100%;
  height: 140px;
}

.chart-mwcs {
  height: 210px;
}

.chart-rmm {
  height: 150px;
  border: 1px solid rgb(20, 120, 150);
}

/*
  header
  ----------------------------------------------------------------- */
#header {
  background-color: rgba(36, 109, 194, 0.4);
  margin-bottom: 15px;
  padding: 15px 0px 15px 30px;
}

/*
  头部面板
----------------------------------------------------------*/
.panel {
  margin-right: 45px;
  width: 305px;
  &-hd {
    margin-bottom: 10px;
    .logo {
      width: 60px;
      height: 39px;
    }
    h1 {
      font-size: 36px;
      background-image: -webkit-linear-gradient(
        bottom,
        #85d9ff,
        #85d9ff,
        #f7fdff
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 36px;
      padding-left: 15px;
      white-space: nowrap;
    }
  }
}
.panel-bd-card {
  height: 70px;
  width: 54%;
  margin-left: 10px;
  .card-hd {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: rgba(74, 144, 226, 0.3);
    border-radius: 50%;
  }
  .card-bd {
    padding-left: 10px;
    text-align: center;
    .title {
      .number {
        font-weight: 700;
        font-size: 32px;
        line-height: 32px;
      }
    }
    .cnt {
      color: #acd4fa;
    }
  }
}
.panel-bd-card-zc {
  width: 46%;
}

/*
 头部卡片
 -----------------------------------------------------------------*/
.card {
  width: 290px;
  height: 115px;
  margin-right: 15px;
}
.card-jg {
  background: url(../images/top-bg1.png) 0 0;
  background-size: cover;
  .card-hd {
    height: 40px;
  }
  .card-bd {
    &-cnt {
      width: 261px;
      height: 68px;
      padding: 10px 5px 0px 5px;
      background-color: #0c305d;
      text-align: justify;
      font-size: 12px;
      line-height: 16px;
    }
  }
}

.card-jc {
  background: url(../images/top-bg2.png) 0 0;
  background-size: cover;
}

.card-yx {
  background: url(../images/top-bg3.png) 0 0;
  background-size: cover;
}

.card-time {
  width: 240px;
  .card-hd {
    display: inline-block;
    width: 235px;
    background-color: #06264d;
    color: #9ff2ff;
    margin-bottom: 7px;
  }
  .card-bd {
    color: #327cc7;
  }
}

/*
 content
 ------------------------------------------------------------------ */

/*
  box 盒子公用
  ----------------------------------------------------------------- */
.box {
  background-color: rgba(36, 109, 194, 0.4);
  padding: 10px 5px;
  &-hd {
    margin-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    span {
      color: #9ff2ff;
    }
  }
  .hr {
    margin-bottom: 5px;
  }
  &-bd {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.box-crzc {
  width: 393px;
  height: 416px;
  margin-bottom: 15px;
}

.mod {
  width: 760px;
}

.box-ldfx,
.box-rmm {
  width: 397px;
  height: 200px;
}
.box-rmm {
  .box-hd {
    margin-bottom: 0px;
  }
}
.box-ldfx {
  margin-bottom: 15px;
}

.box-crxjc {
  width: 677px;
  height: 270px;
}

.box-gwaq {
  width: 444px;
  height: 270px;
  margin: 0 16px;
}

.box-mwcs {
  width: 397px;
  height: 270px;
}

.table {
  width: 100%;
  .thead {
    background-color: rgba(74, 144, 226, 0.4);
  }
  .tr {
    text-align: center;
    height: 35px;
    line-height: 35px;
    width: 100%;
    .td {
      float: left;
    }
    .th {
      float: left;
    }
  }
}

.table-cryc {
  .tbody {
    .tr {
      .ip {
        text-align: left;
        width: 40%;
        color: #9ff2ff;
      }
      .name {
        width: 30%;
      }
      .status {
        width: 30%;
        a {
          padding: 4px;
          color: #f8c11c;
          text-align: center;
          background-color: rgba(248, 231, 28, 0.2);
        }
      }
    }
  }
}
.table-crxjc {
  .hr {
    margin-bottom: 10px;
  }
  .tbody {
    .status {
      a {
        color: #f8c11c;
      }
    }
  }
  .name {
    width: 15%;
  }
  .keyword {
    width: 15%;
  }
  .ip {
    width: 15%;
  }
  .status {
    width: 8%;
  }
  .start-time {
    width: 22%;
  }
  .content {
    width: 20%;
  }
}

.table-gwaq {
  .name {
    float: left;
    width: 34%;
  }
  .sum {
    float: left;
    width: 33%;
  }
  .ip {
    float: left;
    width: 30%;
  }
  .hr {
    margin-bottom: 10px;
  }
}

/*
 中间部位
 ------------------------------- */
.mod {
  height: 414px;
  .row {
    height: 100%;
    .col-6 {
      height: 100%;
      // position: relative;
    }
    .col-12 {
      height: 100%;
    }
  }
}

/*
 小圈
------------------------------------ */
.small-circle-box {
  width: 80px;
  height: 80px;
  position: relative;
  .box-hd {
    .rotate {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 4;
      width: 80px;
      height: 80px;
      &:hover {
        animation: turn 1s linear 1;
      }
    }
    .border-dotted {
      position: absolute;
      width: 64px;
      top: 8px;
      left: 8px;
      z-index: 2;
    }
  }
  .box-bd {
    width: 100%;
    height: 100%;
    .number {
      z-index: 3;
      font-size: 36px;
      font-weight: 700;
    }
    .text {
      z-index: 3;
      position: absolute;
      width: 100px;
      top: 90px;
      left: 0;
      font-size: 16px;
      color: #9ff2ff;
    }
    .text-ldfx {
      left: 10px;
    }
    .text-rmm {
      left: 15px;
    }
  }
}

/*
 大圈
------------------------------------ */
.big-circle-box {
  position: relative;
  width: 390px;
  height: 398px;
  .box-hd {
    img {
      position: absolute;
      top: 0;
      left: 0;
    }
    .tc-map {
      top: 60px;
      left: 60px;
      z-index: 0;
    }
    .halo {
      z-index: 1;
    }
    .rotate {
      z-index: 5;
      top: 24px;
      left: 26px;
    }
    img.rotate:hover {
      animation: turn 1s linear 1;
    }
    .rotate-circle {
      z-index: 3;
      top: 38px;
      left: 200px;
      height: 160px;
      width: 116px;
      transform-origin: 0 100%;
      animation: turnone 4s linear infinite;
    }
  }
  .box-bd {
    width: 100%;
    height: 100%;
    .number {
      font-size: 72px;
      font-weight: 700;
      z-index: 4;
    }
    .text {
      position: absolute;
      font-size: 18px;
      top: 240px;
      left: 150px;
      z-index: 4;
    }
  }
}
